<!-- 预览 -->
<template>
  <div class="app-container">
    <Edialog
      :outershow="outershow"
      :title="title"
      @close="closeFn"
      :saveClick="false"
      :width="'70%'"
    >
      <SpreadSheet
        v-if="outershow"
        style="height: 70vh; width: 100%"
        ref="Sheet"
        SheetName="Sheet1"
        :File="file"
        :Headers="headers"
        :ColumnWidth="200"
        :Records="records"
        @loaded="loaded"
        :onlyRead="true"
      ></SpreadSheet>
    </Edialog>
  </div>
</template>

<script>
import SpreadSheet from "@/components/Xspreadsheet/SpreadSheet.vue";
import Edialog from "@/components/Edialog";

export default {
  data() {
    return {
      outershow: false,
      title: "预览",

      file: null,
      ColumnCount: 30,
      RowCount: 100,
      headers: [],
      records: [],
    };
  },
  components: {
    Edialog,
    SpreadSheet,
  },
  methods: {
    loaded(data) {
      console.log("loaded", data);
    },
    //外部打开弹窗
    manufacturerOpen(data) {
      this.outershow = true;
      setTimeout(() => {
        this.$refs.Sheet.loadData(JSON.parse(data.excelJson) || []);
      });
    },

    closeFn() {
      this.outershow = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.el-select {
  width: 100%;
}
.el-form-item {
  width: 50%;
}
::v-deep .el-form-item__content {
  width: 80%;
}
.choose::-webkit-file-upload-button {
  color: white;
  display: inline-block;
  background: #409eff;
  border: none;
  padding: 12px 20px;
  width: 100px;
  height: 40px;
  border-radius: 3px;
  white-space: nowrap;
  cursor: pointer;
  font-size: 10pt;
}
</style>
